<template>
	<div class="header-box">
		<div>
			<el-row class="m-nav">
				<el-col :span="24">
					<header>
						<div class="header-logo"></div>
						<ul>
							<li v-for="(item,i) in navList" class="nav-item" @click="changeRouter(item,i)" v-bind:id="i" :class="navIndex == i ? 'active' : ''">
								{{ item.navItem }}
							</li>
						</ul>
					</header>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
	import { mapMutations, mapState } from 'vuex'
	import { getCartList, cartDel, getQuickSearch } from '/api/goods'
	import { navList } from '/api/index'
	import { setStore, getStore, removeStore } from '/utils/storage'
	import 'element-ui/lib/theme-default/index.css'
	export default {
		data() {
			return {
				isRouter: true,
				navList: [{
						path: '/index',
						navItem: '官网首页'
					},
					{
						path: '/game',
						navItem: '游戏专区'
					},
          {
            path: '/leveling',
            navItem: '游戏代练'
          },
					{
						path: '/join',
						navItem: '商家入驻',
					},
					{
						path: '/security',
						navItem: '安全保障'
					},
					{
						path: '/about',
						navItem: '联系我们'
					},
					{
						path: '/notice',
						navItem: '最新公告'
					}
				]
			}
		},
		computed: {
			...mapState(['navIndex']) //将vuex中的navIndex获取赋值到当前的局部对象中
		},
		methods: {
			...mapMutations(['CHANGE_NAV']), //将Mutations中的方法在局部对象在定义一次
			changeRouter(item, index) {
				this.nowIndex = index;
				if(item.isPopUp) {
					//测试环境与生产环境弹出页面不一致
					if(process.env.NODE_ENV === "development") {
						window.open(item.testPath);
					} else {
						window.open(item.path);
					}
				} else {
					this.CHANGE_NAV(index);
					if(item.path) {
						this.$router.push({
							path: item.path
						});
					} else {

					}
				}
			}
		},
		mounted() {

		}
	}
</script>
<style lang="scss" scoped>
	.header-box {
		position: fixed;
		width: 100%;
		height: 60px;
		z-index: 99999999;
		top: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.m-nav {
		background-color: #000000;
		opacity: 0.8;
		font-weight: bold;
	}

	.m-nav ul {
		list-style: none;
		font-size: 0;
		height: 100%;
		border: 1px solid #000000;
	}

	.m-nav li {
		padding: 20px 30px;
		float: left;
		color: #fff;
		cursor: pointer;
		font-size: 14px;
		width: 120px;
	}

	.m-nav li:hover {
		background: linear-gradient(#333, #ff5a00);
		color: white;
	}

	.active {
		background: linear-gradient(#333, #ff5a00);
	}

	.header-logo {
		display: inline-block;
		width: 160px;
		height: 60px;
		float: left;
		min-width: 220px;
		max-height: 70px;
		margin-left: 12%;
		background: url(../../static/images/bg/header-logo.png) no-repeat;
		background-size: 70%;
		background-position-y: 8px;
		background-position-x: 50px;
		color: white;
		padding-left: 60px;
		padding-top: 15px;
		font-size: 12px;
	}
</style>
